<script setup lang="ts">
import { useUserInfoStore } from '@/stores/userInfo'
import { NGradientText, NWatermark } from 'naive-ui'

const userInfoStore = useUserInfoStore()
</script>

<template>
  <div class="header flex align-items-center justify-content-between">
    <div class="title">人力资源管理</div>
    <div class="right-area flex align-items-center">
      <NGradientText type="danger" :size="16">{{ userInfoStore.userInfo.username }}</NGradientText>
    </div>
    <NWatermark
      fullscreen
      :content="userInfoStore.userInfo.username"
      :font-size="16"
      :line-height="16"
      :width="300"
      :height="300"
      :x-offset="12"
      :y-offset="30"
      :rotate="-30"
      cross
    />
  </div>
</template>

<style scoped lang="scss">
.header {
  height: 100%;
  padding: 0 20px;
  .title {
    font-size: 24px;
    font-weight: bold;
    font-family: fangsong;
  }
  .right-area {
    gap: 12px;
  }
}
</style>
